<template>
  <div class="module">
    <div class="module-title">
      风险偏好
      <el-date-picker
        v-model="nper"
        type="month"
        format="yyyy-MM"
        value-format="yyyyMM"
        placeholder="选择期数"
        style="margin-left: 15px"
      />
      <div class="btn-right">
        <a class="jump" @click="jumpPage">管理</a>
        <a class="jump" @click="jumpDialog">创建</a>
        <span>|</span>
        <a>更多</a>
      </div>
    </div>
    <div class="module-body">
      <el-row :gutter="20">
        <el-col v-for="card in gaugeCards" :key="card.name" :span="6">
          <div class="basic-card">
            <h3 class="title">{{ card.name }}</h3>
            <v-chart class="echarts" :option="card.option" autoresize />
            <h6 class="compare">
              比上期
              <span class="rate">
                <div
                  :start-val="0"
                  :end-val="Math.abs(card.compare)"
                  :duration="1500"
                  :decimals="2"
                />
                %
              </span>
              <span :class="card.compare > 0 ? 'rate_up' : card.compare < 0 ? 'rate_down' : ''" />
            </h6>
            <div class="top">
              <div class="left">{{ card.topName }}：</div>
              <div class="right">
                <span class="num">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(card.top)"
                    :duration="1500"
                    :decimals="2"
                  />
                  万元
                </span>
                <span
                  :class="card.top > 0 ? 'rate_up_long' : card.top < 0 ? 'rate_down_long' : ''"
                />
              </div>
            </div>
            <div class="bottom">
              <div class="left">{{ card.bottomName }}：</div>
              <div class="right">
                <span class="num">
                  <div
                    :start-val="0"
                    :end-val="Math.abs(card.bottom)"
                    :duration="1500"
                    :decimals="2"
                  />
                  万元
                </span>
                <span
                  :class="
                    card.bottom > 0 ? 'rate_up_long' : card.bottom < 0 ? 'rate_down_long' : ''
                  "
                />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <Dialog ref="dialog" />
  </div>
</template>

<script>
import { ref, reactive } from '@vue/composition-api'
import gaugeOption from '../options/gaugeOption'
import cloneDeep from 'lodash/cloneDeep'
import Dialog from './dialog.vue'
export default {
  components: { Dialog },
  props: {
    _nper: String
  },
  setup(props, { refs, root }) {
    const nper = ref(props._nper)

    const radarOption1 = cloneDeep(gaugeOption)
    const radarOption2 = cloneDeep(gaugeOption)
    const radarOption3 = cloneDeep(gaugeOption)
    const radarOption4 = cloneDeep(gaugeOption)
    for (const i in radarOption1.series[1].data) {
      radarOption1.series[1].data[i].value = 0.58
    }
    for (const i in radarOption2.series[1].data) {
      radarOption2.series[1].data[i].value = 0.87
    }
    for (const i in radarOption3.series[1].data) {
      radarOption3.series[1].data[i].value = 0.76
    }
    for (const i in radarOption4.series[1].data) {
      radarOption4.series[1].data[i].value = 0.72
    }
    const gaugeCards = reactive([
      {
        name: '核心资本充足率',
        option: radarOption1,
        compare: 2.28,
        top: 20789.11,
        bottom: -1112.45,
        topName: '核心一级资本',
        bottomName: '信用风险加权资产'
      },
      {
        name: '净资产收益率ROE',
        option: radarOption2,
        compare: 0,
        top: 3000,
        bottom: -1500,
        topName: '母公司税后净利润',
        bottomName: '加权平均所有者权益'
      },
      {
        name: '不良贷款率',
        option: radarOption3,
        compare: 2.28,
        top: -2000,
        bottom: 0,
        topName: '不良损失准备',
        bottomName: '不良贷款余额'
      },
      {
        name: '流动性比例',
        option: radarOption4,
        compare: -2.28,
        top: -2000,
        bottom: -1500,
        topName: '流动性资产余额',
        bottomName: '流动性负债余额'
      }
    ])

    const jumpDialog = () => {
      refs.dialog.init()
    }
    const jumpPage = () => {
      root.$router.push({ name: 'modulemanage' })
    }
    return {
      nper,
      gaugeCards,
      jumpDialog,
      jumpPage
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts {
  height: 300px;
}
.btn-right {
  margin-left: auto;
  font-size: 12px;
  .jump {
    margin-left: 10px;
  }
  span {
    display: inline-block;
    margin: 0 10px;
    font-size: 10px;
    color: #ddd;
  }
}
.module-body {
  .compare,
  .top,
  .bottom {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #777;
    .left {
      text-align: right;
      flex: 1.2;
    }
    .right {
      margin-left: 15px;
      flex: 1;
    }
  }
  .compare {
    justify-content: center;
    font-size: 14px;
    margin-top: -10px;
  }
  .top {
    margin-top: 20px;
  }
  .bottom {
    margin-top: 10px;
  }
  .rate {
    margin-left: 3px;
    color: #666;
    font-weight: bold;
  }
  .rate_up,
  .rate_down,
  .rate_up_long,
  .rate_down_long {
    left: 5px;
  }
  .rate_up {
    top: -8px;
  }
  .rate_down {
    top: -2px;
  }
}
</style>
